<template>
    <el-dialog :title="detailData.plate_no" :visible.sync="outerVisible" width="1200px">
        <div class="flex flex-direction ">
            <div v-loading="detailLoading" class="flex">
                <div class="flex-sub margin-right flex flex-direction">
                    <vehicle-info :detail-data="detailData" />

                    <div class="flex  margin-top-sm">
                        <el-button size="small" type="primary" icon="el-icon-edit" style="width: 100px;"
                                   @click="handleEdit">
                            编辑
                        </el-button>
                        <el-button size="small" type="primary" icon="el-icon-edit" style="width: 100px;"
                                   @click="correction">
                            校正
                        </el-button>
                        <!--                        <el-button size="small" type="primary">车辆定位</el-button>-->
                        <!--                        <el-button size="small" type="primary">蒙牌定位</el-button>-->
                        <!--                        <el-button size="small" type="primary">轨迹回放</el-button>-->
                    </div>
                </div>
                <div style="width: 50%;">
                    <div style="width: 100%; text-align: right;">
                        <el-button size="small" type="primary" style="width: 80px;"
                                   @click="getParentDetails(indexs -1)">
                            上一条
                        </el-button>
                        <el-button size="small" type="primary" style="width: 80px;"
                                   @click="getParentDetails(indexs +1)">
                            下一条
                        </el-button>
                    </div>
                    <el-tabs v-model="mediaTab" type="card" height="100%">
                        <el-tab-pane label="车辆照片" style="background: #000;" name="img">
                            <el-carousel trigger="click" height="275px">
                                <el-carousel-item v-for="item in images" :key="item">
                                    <el-image
                                        style="width: 100%; height: 100%;"
                                        :src="item"
                                        fit="contain" />
                                </el-carousel-item>
                            </el-carousel>
                        </el-tab-pane>
                        <el-tab-pane label="预检视频" name="video">
                            <div style="background: #000; height: 275px;">
                                <video style="width: 100%; height: 100%;" controls>
                                    <source :src="detailData.video_path||''" type="video/mp4">
                                    您的浏览器不支持视频播放。
                                </video>
                            </div>
                        </el-tab-pane>
                    </el-tabs>
                </div>
            </div>
            <div style="margin-top: 15px; width: 100%;">
                <el-row>
                    <el-col :span="24">
                        初审信息
                    </el-col>
                </el-row>
                <el-row v-for="(InquiryResult,index) in InquiryResults" :key="index" style="width: 100%; margin: 10px 0 10px 0;">
                    <el-col :span="6">
                        <el-radio v-model="InquiryResult.first_audit_result" disabled :label="1">确认违法</el-radio>
                        <el-radio v-model="InquiryResult.first_audit_result" disabled :label="0">作废</el-radio>
                    </el-col>
                    <el-col :span="12">
                        <el-checkbox v-model="InquiryResult.firstIllegalType.zdhp" disabled>遮挡号牌</el-checkbox>
                        <el-checkbox v-model="InquiryResult.firstIllegalType.jp" disabled>假牌</el-checkbox>
                        <el-checkbox v-model="InquiryResult.firstIllegalType.tp" disabled>套牌</el-checkbox>
                        <el-checkbox v-model="InquiryResult.firstIllegalType.yx" disabled>压线</el-checkbox>
                    </el-col>
                </el-row>
            </div>
            <div style="margin-top: 15px; width: 100%;">
                <el-row>
                    <el-col :span="24">
                        {{ step == "fs" ? "复审信息" : "初审信息" }}
                    </el-col>
                </el-row>
                <el-row style="width: 100%; margin: 10px 0 10px 0;">
                    <el-col :span="6">
                        <el-radio-group v-model="isIllegal" @change="showHandleResult">
                            <el-radio label="1">确认违法</el-radio>
                            <el-radio label="0">作废</el-radio>
                        </el-radio-group>
                    </el-col>
                    <el-col :span="12">
                        <el-checkbox v-model="illegalType.zdhp">遮挡号牌</el-checkbox>
                        <el-checkbox v-model="illegalType.jp">假牌</el-checkbox>
                        <el-checkbox v-model="illegalType.tp">套牌</el-checkbox>
                        <el-checkbox v-model="illegalType.yx">压线</el-checkbox>
                    </el-col>
                </el-row>
                <el-row style="width: 100%; margin: 50px 0 10px 0;">
                    <el-col :span="24" style="text-align: right;">
                        <el-button size="small" type="primary" style="width: 80px;" @click="saveData">保存</el-button>
                        <el-button size="small" type="primary" style="width: 80px;" @click="outerVisible = false">
                            取消
                        </el-button>
                    </el-col>
                </el-row>
            </div>
        </div>
        <exam-edit ref="exam-edit" :init-data="detailData" />
        <InvalidReasonList :invalid-reason-flag="invalidReasonFlag"
                           @returnInvalidReason="returnInvalidReason"
                           @closeInvalidReason="closeInvalidReason" />
    </el-dialog>
</template>

<script>
import moment from 'moment';
// import ExamEdit from './exam-edit';
// import InvalidReasonList from './invalidReasonList';
// import VehicleInfo from '@/modules/components/VehicleDetail/vehicle-info';
// import {OutOfLimitData} from '@/api/informationApi';
// import {Correction, CheckVehicleExist, InsertEvidenceAuditDetail, InquiryResult} from '@/api/overrunPenaltyApi';

export default {
    name: 'VehicleDetail',
    // components: {ExamEdit, VehicleInfo, InvalidReasonList},
    props: {
        initDetailData: Object,
        indexs: Number,
        tableSize: Number,
        currentPage: Number,
        total: Number,
        step: String,
        InquiryResults: Array,
        firstIllegalType: Object
    },
    data() {
        return {
            zdhp: false,
            jp: false,
            tp: false,
            yx: false,
            invalidReasonFlag: false,
            isIllegal: '',
            illegalType: {
                zdhp: false,
                jp: false,
                tp: false,
                yx: false
            },
            outerVisible: false,
            tableData: [],
            totalCount: 0,
            isLoading: false,
            queryParams: {},
            detailLoading: false,
            localVehicleDetail: null,
            mediaTab: 'img',
            Invalid_reason_list: '',
            Invalid_reason_remark: '',
            invalidReasons: [
                {
                    id: 1,
                    reason: '执法信息系统自动匹配的违法主体基本信息不完整，影响行政处罚相对人认定'
                },
                {
                    id: 2,
                    reason: '无车辆照片、视频或者车辆照片、视频不清'
                },
                {
                    id: 3,
                    reason: '车辆轴数与抓拍照片车型不匹配的(误判)'
                },
                {
                    id: 4,
                    reason: '无车牌号、牌号不全或无法识别，无法确定车辆真实所有人'
                },
                {
                    id: 5,
                    reason: '视频显示车牌、车牌颜色、车型与抓拍照片车牌、车牌颜色、车型不匹配的(不同步)'
                },
                {
                    id: 6,
                    reason: '无称重数据或数据不全'
                },
                {
                    id: 7,
                    reason: '技术监控设施、称重检测设施因检定证书失效、接受检定，调试维护等技术作业期间所测得'
                },
                {
                    id: 8,
                    reason: '检测数据明显不合理，或超限运输比例在超限技术监控设备合理误差范围内'
                },
                {
                    id: 9,
                    reason: '车速超过检定证书确定范围'
                }

            ],
            invalidReasonsResult: [],
            invalidReasonRemark: ''
        };
    },
    computed: {
        images() {
            let images = this.detailData.image_path;
            if (images) {
                return images.split(',');
            }
            return [];
        },
        detailData() {
            return this.localVehicleDetail || this.initDetailData;
        },
        firstIsIllegal() {
            return this.firstIllegalType;
        },
        currentPage1() {
            return this.currentPage;
        }
    },
    watch: {
        initDetailData(val) {
            this.localVehicleDetail = null;
            this.queryParams = {
                Parameter: '1',
                CurrentPage: 1,
                plate_no: val.plate_no
            };
            this.mediaTab = 'img';
            this.loadRemoteData();
            console.log('this.firstIllegalType');
            console.log(this.firstIllegalType);
            this.zdhp = this.firstIllegalType.zdhp;
            this.jp = this.firstIllegalType.jp;
            this.tp = this.firstIllegalType.tp;
            this.yx = this.firstIllegalType.yx;
            console.log(this.zdhp);
        }
    },
    mounted() {
        /* CheckVehicleExist({vclN : '鲁H03J75'}).then(res=>{
                 console.log("=========================11");
                 console.log(res);

             }).catch(err=>{
                 console.log(err);
             });*/
    },
    methods: {
        returnInvalidReason(result) {
            this.Invalid_reason_list = result.invalidReasonsResult;
            this.Invalid_reason_remark = result.invalidReasonRemark;
            this.invalidReasonFlag = false;
        },
        closeInvalidReason(reslut) {
            this.invalidReasonFlag = reslut;
        },
        showHandleResult(param) {
            if (param == '0') {
                this.invalidReasonFlag = true;
            }

        },
        saveData() {
            if (this.clickTooFast()) return;
            if (!this.isIllegal) {
                this.$message({
                    type: 'warn',
                    message: '请选择处理结果:确认违法或作废'
                });
                return false;
            }
            var param = {
                Plate_no: this.detailData.plate_no,
                Defend: this.isIllegal
            };
            var zdhp = this.illegalType.zdhp ? '0' : '1';
            var jp = this.illegalType.jp ? '0' : '1';
            var tp = this.illegalType.tp ? '0' : '1';
            var yx = this.illegalType.yx ? '0' : '1';
            param.Violative_action = zdhp + jp + tp + yx;
            param.Invalid_reason_list = this.Invalid_reason_list;
            param.Invalid_reason_remark = this.Invalid_reason_remark;
            param.Pass_time = moment(this.detailData.pass_time).format('YYYY-MM-DD HH:mm:ss');
            InsertEvidenceAuditDetail(param).then(res => {
                if (res.res.EvidenceAuditDetail) {
                    this.$message({
                        message: '初审完成!',
                        type: 'success'
                    });
                    this.outerVisible = false;
                    this.$emit('getList', this.currentPage);
                }
            }).catch(err => {
                console.log(err);
            });
        },
        correction() {
            this.$prompt('请输入校正密码', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                inputType: 'password',
                inputErrorMessage: '密码不正确'
            }).then(({value}) => {
                if (value != '123456') {
                    this.$message({
                        type: 'error',
                        message: '密码不正确'
                    });
                } else {
                    var param = {
                        CorrectingCode: value,
                        Violative_alarm_id: this.detailData.violative_alarm_id
                    };
                    Correction(param).then(res => {
                        if (res.res) {
                            if (res.res.Correction == '校正码不正确') {
                                this.$message({
                                    message: '校正码不正确',
                                    type: 'error'
                                });
                            } else {
                                this.$message({
                                    message: '校正成功!',
                                    type: 'success'
                                });
                            }
                        }
                    }).catch(err => {
                        this.$message({
                            message: '校验失败',
                            type: 'error'
                        });
                        console.log(err);
                    });
                }

            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '取消输入'
                });
            });
        },
        getParentDetails(index) {
            if (index < 0) {
                if (this.currentPage == 1) {
                    this.$message({
                        message: '已是第一条',
                        type: 'warn'
                    });
                    return false;
                } else {
                    this.$emit('getList', this.currentPage - 1);
                    index = 0;
                    setTimeout(() => {
                        this.$emit('handleViews', index);
                    }, 1000);
                }
            }
            if (this.tableSize == index) {

                if (((this.currentPage - 1) * 20 + index + 1) > this.total) {
                    this.$message({
                        message: '已是最后一条',
                        type: 'warn'
                    });
                    return false;
                } else {
                    this.$emit('getList', this.currentPage + 1);
                    index = 0;
                    setTimeout(() => {
                        this.$emit('handleViews', index);
                    }, 1000);
                    return false;
                }
            }
            this.$emit('handleViews', index);
        },
        moment,
        show() {
            this.outerVisible = true;
        },
        handleCurrentChange(val) {
            this.queryParams.CurrentPage = val;
            this.loadRemoteData();
        },
        handleTabClick() {
            this.queryParams.CurrentPage = 1;
            this.loadRemoteData();
        },
        handleView(item) {
            this.detailLoading = true;
            setTimeout(() => {
                this.localVehicleDetail = item;
                this.detailLoading = false;
            }, 100);

        },
        loadRemoteData() {
            this.isLoading = true;
            OutOfLimitData(this.queryParams).then(res => {
                this.isLoading = false;
                this.tableData = res.res.OutOfLimitData;
                if (this.tableData && this.tableData.length > 0) {
                    this.totalCount = this.tableData[0].totalCount;
                }

            }).catch(err => {
                this.isLoading = false;
                console.log(err);
            });
        },
        handleEdit() {
            this.$refs['exam-edit'].show();
        }
    }
};
</script>

<style scoped>

    /deep/
    .el-dialog__body {
        padding: 10px 20px;
    }
    /deep/
    .el-dialog__header {
        padding: 20px 20px 10px;
        border-bottom: 1px solid #dcdfe6;
    }

</style>
